<template>
    <div class="menu">
        <el-menu :default-active="`4`" class="el-menu-demo" mode="horizontal">
            <el-menu-item v-for="item in menu" :index="item[0]" style="width: 125px;" @click="handleSelect(item[0])">{{
            item[1]
        }}</el-menu-item>
        </el-menu>
    </div>
</template>

<script lang="ts">
export default {
    name: 'MenuComponent'
}
</script>

<script setup lang="ts">

import {
    ElMenu,
    ElMenuItem
} from 'element-plus';

import { appRouter } from "../router/router"
import { onMounted, ref } from 'vue';

const menu = ref<Map<string, string>>(new Map<string, string>());


onMounted(() => {
    menu.value = getRouterMenu();
})

/**
 * 获取路由菜单
 */
function getRouterMenu(): Map<string, string> {
    const router = appRouter;
    const menu = new Map<string, string>();
    router.getRoutes().forEach((item) => {
        if (item.meta && item.meta.title) {
            let index = item.path;
            let itemTitle = item.meta.title.toString();
            menu.set(index.toString(), itemTitle);
        }
    });
    return menu;
}


/**
 * 处理菜单点击事件
 * @param index 路由页面路径
 */
function handleSelect(index: string): void {
    appRouter.push(index);
    // switch (index) {
    //     case '0':
    //         appRouter.push(rotpaths.Home);
    //         break;
    //     case '1':
    //         appRouter.push(rotpaths.Kanban);
    //         break;
    //     case '2':
    //         appRouter.push(rotpaths.Settings);
    //         break;
    //     case '3':
    //         appRouter.push(rotpaths.User);
    //         break;
    //     default:
    //         appRouter.push(rotpaths.Home);
    // }
}

</script>
